<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进阶：12、Render函数 基础</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<anchored-heading :level="level">level {{ level }}</anchored-heading>
		<!-- <anchored-heading1 :level="level"></anchored-heading1> -->
		<anchored-heading2 :level="level">Level {{ level }}</anchored-heading2>
	</div>

	<template id="anchored-heading-template">
		<div>
			<h1 v-if="level === 1"><slot></slot></h1>		
			<h2 v-if="level === 2"><slot></slot></h2>		
			<h3 v-if="level === 3"><slot></slot></h3>		
			<h4 v-if="level === 4"><slot></slot></h4>		
			<h5 v-if="level === 5"><slot></slot></h5>		
			<h6 v-if="level === 6"><slot></slot></h6>		
		</div>
	</template>

	<script type="text/javascript">
		// 在大多数情况下，定义组件时使用template是定义组件dom的最佳实践
		// 但是某些情况下，使用template显得很笨重
		// 在这种场景中使用 template 
		// 并不是最好的选择：首先代码冗长，为了在不同级别的标题中插入锚点元素，
		// 我们需要重复地使用 <slot></slot>。其次由于组件必须有根节点，标题和
		// 锚点元素被包裹在了一个无用的 div 中。
		Vue.component('anchored-heading',{
			template: '#anchored-heading-template',
			props: {
				level: {
				    type: Number,
				    required: true
				}
			}			
		})
		// 本来想着能不能通过这种拼接的方式解决，发现报错不行
		// Vue.component('anchored-heading1',{
		// 	template: '<h'+this.level+'>{{ level }}</h'+this.level+'>',
		// 	props: {
		// 		level: {
		// 		    type: Number,
		// 		    required: true
		// 		}
		// 	}			
		// 		
		// 有什么办法模板变得不这么臃肿呢？用Render函数生成组件模板
		Vue.component('anchored-heading2',{
			render: function(createElement){
				// createElement是XML DOM方法，用来创建一个元素
				// 参数为元素标签名，这里有第二个参数，应该是原来的
				// 方法被vue封装了一次，注意这里的createElement是一个
				// 参数，而不是原生的document.createElement('xxx')里的那个createElement()	
				// 支持递归使用，在后面的demo中可以看到		
				return createElement(
					'h' + this.level,   // tag name 标签名称
					this.$slots.default // 子组件中的阵列，这里的$solt对应默认不带name的slot标签
				)
			},
			props: {
				level: {
				    type: Number,
				    required: true
				}
			}			
		})
		var vm = new Vue({
			el: '#app',
			data: {
				level: 3
			}
		})
	</script>
</body>
</html>